<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="index.css"/>
</head>
<body >
<div class="warp">
    <div>
        <div class="mod-tab">
            <ul id="list">
                <li class="tab-con" style="opacity: 1">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/1.jpg)"></a>
                    </span>
                </li>
                <li class="tab-con" style="opacity: 0">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/2.jpg)"></a>
                    </span>
                </li>
                <li class="tab-con" style="opacity: 0">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/3.jpg)"></a>
                    </span>
                </li>
                <li class="tab-con" style="opacity: 0">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/4.jpg)"></a>
                    </span>
                </li>
                <li class="tab-con" style="opacity: 0">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/5.jpg)"></a>
                    </span>
                </li>
                <li class="tab-con" style="opacity: 0">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/6.jpg)"></a>
                    </span>
                </li>
                <li class="tab-con" style="opacity: 0">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/7.jpg)"></a>
                    </span>
                </li>
                <li class="tab-con" style="opacity: 0">
                    <span class="pic">
                        <a href="#" style="background-image: url(image/8.jpg)"></a>
                    </span>
                </li>
            </ul>
            <div id="gb-tab" class="gb-tab">
                <a href="javascript:;" class="item2" ></a>
                <a href="javascript:;" class="item" ></a>
                <a href="javascript:;" class="item" ></a>
                <a href="javascript:;" class="item" ></a>
                <a href="javascript:;" class="item" ></a>
                <a href="javascript:;" class="item" ></a>
                <a href="javascript:;" class="item" ></a>
                <a href="javascript:;" class="item" ></a>
            </div>
            <a href="javascript:;" id="prev" class="arrow">&lt;</a>
            <a href="javascript:;" id="next" class="arrow">&gt;</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>